<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="department">
            <div class="system">
                <home-bar :currentPage='currentPage'></home-bar>
                <div class="system-main">
                    <div class="main-position">
                        首页 > 员工管理 > 员工管理
                    </div>
                    <div class="main-height"></div>
                    <div class="main-mains">
                        <div class="main-top-nav">
                            <ul>
                                <router-link to="/employees" @click.native="addPath('/employees','员工管理')">
                                    <li class="active">员工管理</li>
                                </router-link>
                                <router-link to="/departments" @click.native="addPath('/departments','员工管理')">
                                    <li>部门管理</li>
                                </router-link>
                            </ul>
                        </div>
                        <div class="employee">
                            <div class="employee-top clear">
                                <router-link to="/addemployee" @click.native="addPath('/addemployee','员工管理')">
                                    <div class="fl">新增员工</div>
                                </router-link>
                                <div class="fl">批量导出</div>
                                <div class="fl" @click="screen()">筛选</div>
                            </div>
                            <div class="employee-table">
                                <table>
                                    <tr>
                                        <td style="width:60px;">序号</td>
                                        <td style="width:100px;">员工编号</td>
                                        <td>员工姓名</td>
                                        <td>员工电子邮箱</td>
                                        <td>所属部门</td>
                                        <td>员工职位</td>
                                        <td>员工地址</td>
                                        <td>入职时间</td>
                                        <td style="width:60px;">工龄</td>
                                        <td>手机号</td>
                                        <td style="width:150px;">操作</td>
                                    </tr>
                                    <tr v-for="(item,index) in employeeData" :key="index" :class="{active:index%2==1}">
                                        <th>{{index + 1}}</th>
                                        <th>{{item.serial}}</th>
                                        <th>{{item.name}}</th>
                                        <th>{{item.email}}</th>
                                        <th>{{item.dep_name}}</th>
                                        <th>{{item.position}}</th>
                                        <th>{{item.address}}</th>
                                        <th>{{item.entry_time | times}}</th>
                                        <th>{{item.age_limit}}年</th>
                                        <th>{{item.phone}}</th>
                                        <th class="actives">
                                            <span @click="edit(item.id)">编辑</span>
                                            <span @click="remove(item.id)">删除</span>
                                            <span @click="disable(item.id)" v-if="item.status==1">禁用</span>
                                            <span v-else @click="disables(item.id)">解禁</span>
                                        </th>
                                    </tr>
                                </table>
                            </div>
                            <div class="orderBotom">
                                <div class="orderBotomRight">
                                    <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="system-menban" v-if="show2"></div>
                <div class="systemPopup" v-show="show2">
                    <div class="topTitle">
                        <span>筛选条件</span>
                        <i class="el-icon-close system-icon" @click="systemClicks()"></i>
                    </div>
                    <div class="customer-systemPopup-con">
                        <div class="customer-systemPopup-cons clear">
                            <div class="fl">所属部门</div>
                            <div class="fl customer-sel">
                                <el-select v-model="departments" placeholder="请选择部门" clearable class="customer-recommend-sel">
                                    <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="customer-systemPopup-cons clear">
                            <div class="fl">工作年龄</div>
                            <div class="fl customer-sel">
                                <el-input class="system-messagebox1-input2" v-model="age" clearable>
                                </el-input>
                            </div>
                        </div>
                        <div class="customer-systemPopup-cons clear">
                            <div class="fl">入职时间</div>
                            <div class="fl customer-sel">
                                <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                                </el-date-picker>
                            </div>
                        </div>
                        <div class="customer-systemPopup-btn clear">
                            <div class="fl" @click="searchList()">提交</div>
                            <div class="fl" @click="systemClicks()">取消</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import topBar from "../../public/top";
    import leftBar from "../../public/left";
    import homeBar from "../../public/homebar";
    export default {
        components: {
            leftBar,
            topBar,
            homeBar
        },
        data() {
            return {
                data: "/employees",
                currentPage: {
                    path: "/employees",
                    name: "员工管理"
                },
                show2: false,
                checkAll: false,
                checkList: [],
                employeeData: [],
                date: "",
                pickerOptions2: {
                    shortcuts: [{
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ]
                },
                totalnum: "",
                age: "", //  工作年龄
                departments: "",
                optionss: []
            };
        },
        methods: {
            screen() {
                //筛选
                this.show2 = true;
                let _this = this;
                _this.optionss = [];
                _this
                    .$http({
                        url: _this.urls +
                            "/who/Department/getDataListAll/" +
                            localStorage.getItem("uid") +
                            "/" +
                            localStorage.getItem("token"),
                        method: "post",
                        data: {}
                    })
                    .then(function(res) {
                        let data = res.data;
                        if (data.code == "1") {
                            for (let i = 0; i < data.data.length; i++) {
                                let arrStr = {
                                    value: data.data[i].id,
                                    label: data.data[i].name
                                };
                                _this.optionss.push(arrStr);
                            }
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            handleCurrentChange(val) {
                this.dataList("", "", "", "", val);
            },
            searchList() {
                // 筛选
                this.show2 = false;
                this.dataList(
                    this.departments,
                    this.age,
                    this.date[0],
                    this.date[1],
                    "1"
                );
            },
            remove(e) {
                //删除员工;
                let _this = this;
                _this
                    .$confirm("是否删除该员工?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        _this
                            .$http({
                                url: _this.urls +
                                    "/who/Staff/del/" +
                                    localStorage.getItem("uid") +
                                    "/" +
                                    localStorage.getItem("token"),
                                method: "post",
                                data: {
                                    id: e
                                }
                            })
                            .then(function(res) {
                                let data = res.data;
                                if (data.code == "1") {
                                    _this.$message({
                                        type: "success",
                                        message: "删除成功!"
                                    });
                                    _this.dataList("", "", "", "", "1");
                                }
                            })
                            .catch(function(error) {
                                console.log(error);
                            });
                    })
                    .catch(() => {
                        _this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            disables(e) {
                //解禁
                let _this = this;
                _this
                    .$confirm("是否解禁该员工?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        _this
                            .$http({
                                url: _this.urls +
                                    "/who/Staff/undisable/" +
                                    localStorage.getItem("uid") +
                                    "/" +
                                    localStorage.getItem("token"),
                                method: "post",
                                data: {
                                    id: e
                                }
                            })
                            .then(function(res) {
                                let data = res.data;
                                if (data.code == "1") {
                                    _this.$message({
                                        type: "success",
                                        message: "解禁成功!"
                                    });
                                    _this.dataList("", "", "", "", "1");
                                }
                            })
                            .catch(function(error) {
                                console.log(error);
                            });
                    })
                    .catch(() => {
                        _this.$message({
                            type: "info",
                            message: "已取消解禁"
                        });
                    });
            },
            disable(e) {
                //禁用
                let _this = this;
                _this
                    .$confirm("是否禁用该员工?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        _this
                            .$http({
                                url: _this.urls +
                                    "/who/Staff/disable/" +
                                    localStorage.getItem("uid") +
                                    "/" +
                                    localStorage.getItem("token"),
                                method: "post",
                                data: {
                                    id: e
                                }
                            })
                            .then(function(res) {
                                let data = res.data;
                                if (data.code == "1") {
                                    _this.$message({
                                        type: "success",
                                        message: "禁用成功!"
                                    });
                                    _this.dataList("", "", "", "", "1");
                                }
                            })
                            .catch(function(error) {
                                console.log(error);
                            });
                    })
                    .catch(() => {
                        _this.$message({
                            type: "info",
                            message: "已取消禁用"
                        });
                    });
            },
            systemClicks() {
                this.show2 = false;
            },
            addPath(n1, n2) {
                //点击切换home-bar
                var obj = {};
                obj.n1 = n1;
                obj.n2 = n2;
                this.$store.commit("addPath", obj);
            },
            dataList(dep, age, startTime, endTime, pages) {
                // 获取员工列表
                let _this = this;
                _this
                    .$http({
                        url: _this.urls +
                            "/who/Staff/getDataList/" +
                            localStorage.getItem("uid") +
                            "/" +
                            localStorage.getItem("token"),
                        method: "post",
                        data: {
                            status: "1",
                            serial: "",
                            name: "",
                            sex: "",
                            email: "",
                            start_time: startTime,
                            end_time: endTime,
                            age_limit: age,
                            phone: "",
                            address: "",
                            position: "",
                            dep_id: dep,
                            page: pages
                        }
                    })
                    .then(function(res) {
                        let data = res.data;
                        if (data.code == "1") {
                            _this.employeeData = data.data.data;
                            _this.totalnum = data.data.total;
                            _this.optionss = [];
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            edit(e) {
                this.$router.push("/editemployee/" + e);
            }
        },
        activated() {
            this.dataList("", "", "", "", "1");
        },
        filters: {
            times(value) {
                var time = new Date(value * 1000);
                var month =
                    time.getMonth() + 1 > 9 ?
                    time.getMonth() + 1 :
                    "0" + (time.getMonth() + 1);
                var data = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
                var hour = time.getHours() > 9 ? time.getHours() : "0" + time.getHours();
                var minutes =
                    time.getMinutes() > 9 ? time.getMinutes() : "0" + time.getMinutes();
                var second =
                    time.getSeconds() > 9 ? time.getSeconds() : "0" + time.getSeconds();
                var times =
                    time.getFullYear() +
                    "-" +
                    month +
                    "-" +
                    data +
                    " " +
                    hour +
                    ":" +
                    minutes +
                    ":" +
                    second;
                return times;
            }
        }
    };
</script>

<style lang="less">
    @import "employee.less";
</style>

